<template>
  <div class="center-list">
    <div class="center-header">
      <div
        v-for="(item, index) in componentsName"
        @click="handleChangeTab(item, index)"
        :class="['default', index == current ? 'active' : '']"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <component :is="currentComponent"></component>
  </div>
</template>

<script  setup>
import { ref } from "vue";
import TutoringPlan from "./TutoringPlan";
import StudyPlan from "./StudyPlan";
import Mine from "./Mine";
const componentsName = ["我的作业", "学习计划", "1V1辅导"];
const current = ref(0);
const currentComponent = ref(Mine);
const components = {
  0: Mine,
  1: StudyPlan,
  2: TutoringPlan,
};
const handleChangeTab = (r, index) => {
  current.value = index;
  currentComponent.value = components[index];
};
</script>

<style lang="scss" scoped>
.center-header {
  height: 65px;
  border-bottom: 1px solid #cccccc;
  padding: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  .default {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #333;
    margin-right: 20px;
    &.active {
      color: #126983;
      position: relative;
      font-weight: 600;
      &::before {
        content: "";
        display: block;
        position: absolute;
        width: 60%;
        height: 2px;
        background-color: #126983;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>